<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<!-- Mirrored from www.zi-han.net/theme/hplus/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:23 GMT -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link rel="stylesheet" th:href="@{/angularjs/pagination.css}">
    <link th:href="@{/css/font-awesome.min93e3.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/layer/layer/theme/default/layer.css}">
    <script type="text/javascript" th:src="@{/angularjs/angular.min.js}"></script>
    <script type="text/javascript" th:src="@{/angularjs/pagination.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/layer/layer/layer.js}"></script>
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <script>
        var app = angular.module('myapp', []);
        app.controller('myctrl', function($scope, $http) {
            let countDown = 0;
            $scope.timing = countDown + "s";
            $scope.verifCode = '';
            $scope.verifCodeDisabled = false;
            $scope.submitBtnDisabled = false;

            function settime() {
                if(countDown > 0) {
                    setTimeout(function() {settime(countDown--); $scope.$apply();}, 1000);
                    $scope.timing = countDown + 's';
                    $(".codeBtn").attr("disable",true)
                }else {
                    $scope.timing = "获取";
                    $(".codeBtn").attr("disable",false)
                    $scope.verifCodeDisabled = true;
                    $scope.submitBtnDisabled = true;
                }
            }
            //密码登录
            $scope.loginPwd = function() {
                var vcode1 = $('#vcode').val();
                //alert(vcode1);
                var vcode = $('#vcode-box').html();
                //alert(vcode);
                var userName = $('#userName').val();
                //alert(userName);
                if(!(/^[a-zA-Z0-9]{4,16}$/.test(userName))){
                    layer.msg("用户名有误，请重填")
                    return false;
                }
                else {
                    if(vcode.toLowerCase() === vcode1.toLowerCase()) {
                        //alert("true")
                        $http.post("/users/loginpwd", $scope.user).success(function(data) {
                            if(data.code === 200) {
                                //alert(data.message);
                                location.href = "/index"
                            } else {
                                layer.msg(data.message)
                            }
                        })
                    } else {
                        layer.msg("验证码错误")
                    }
                }
            }
            settime();
            //手机号登录
            $scope.loginTel = function(){
                var verifCode = $("#smscode").val();
                //console.log(verifCode)
                var phone = $('#phoneNumber').val();
                //console.log(phone)
                $http.get("/users/verify?verifyCode="+verifCode+"&phoneNumber="+phone).success(function (data) {
                    //alert(data.code);
                    if (data.code===200){
                        $http.post("/users/loginByTel?phoneNumber="+phone).success(function (data) {
                            layer.msg(data.message+"将要跳转至登陆界面")
                            location.href = "/index";
                        })
                    }
                    else {
                        layer.msg("短信验证码错误,请确定后重新输入")
                    }
                })
            }
            //注册
            $scope.register = function(){
                var verifCode = $("#regcode").val();
                //console.log(verifCode)
                var phone = $('#registerTel').val();
                //console.log(phone)
                var userAccount = $('#userAccount').val();
                var password = $('#password').val();
                var checkpwd = $('#checkpwd').val();
                if(!(/^[a-zA-Z0-9]{4,16}$/.test(userAccount))){
                    layer.msg("用户名有误，请重填")
                    return false;
                }
                else {
                    if (!(/^(\w){6,20}$/.test(password)) || !(/^(\w){6,20}$/.test(checkpwd))){
                        layer.msg("密码格式错误")
                    }
                    else {
                        if (password.toLowerCase() === checkpwd.toLowerCase()){
                            $http.get("/users/verify?verifyCode="+verifCode+"&phoneNumber="+phone).success(function (data) {
                                //alert(data.code);
                                if (data.code===200){
                                    $http.post("/users/register",$scope.user).success(function (data) {
                                        if (data.code===200){
                                            layer.msg(data.message+"前往登陆界面");
                                            location.href = "/tologin";
                                        }
                                        else {
                                            layer.msg(data.message+"用户名或手机号已存在,请前往修改密码")
                                        }
                                    })
                                }
                                else {
                                    layer.msg("短信验证码错误,请确定后重新输入")
                                }
                            })
                        }
                        else {
                            layer.msg("两次密码不一致");
                        }
                    }
                }
            }

            $scope.reacQuire = function() {
                var phone = $('#phoneNumber').val();
                //alert(phone)var phone = document.getElementById('phone').value;
                if (phone === undefined || phone === ''){
                    layer.msg("手机号不可为空")
                    return false;
                }
                else {
                    if(!(/^1[3456789]\d{9}$/.test(phone))){
                        layer.msg("手机号码有误，请重填")
                        return false;
                    }
                    else {
                        $http.get("/users/smscode?phoneNumber="+phone).success(function (data) {
                            //$scope.registerCode = data;
                            layer.msg(data.message);
                        })
                    }
                }
                if(countDown <= 0) {
                    countDown = 60;
                    $scope.timing = countDown + "s";
                    settime();
                    $scope.verifCodeDisabled = false;
                    $scope.submitBtnDisabled = false;
                }
            };


        })
    </script>
    <script>
        $(function() {
            /* 存储验证码 undefined*/
            var code;
            //生成验证码
            function genCode() {
                //重置验证码
                code = '';
                //验证码字符库
                var datas = '0123456789abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ';
                for(var i = 0; i < 4; i++) {
                    var index = Math.floor(Math.random() * datas.length);
                    code += datas[index];
                }
                $('.vcode-box').html(code);
            }
            //为span绑定点击事件
            $('.vcode-box').on('click', function() {
                genCode();
            })
            genCode();

            $('#loginpwd').click(function() {
                $("#loginpassword").css("display", "block");
                $("#logintelnumber").css("display", "none");
                $("#registerMod").css("display", "none");
                $("#modifyPwd").css("display", "none");
                $("#loginpwd").css("text-decoration", "underline")
                $("#logintel").css("text-decoration", "none")
            });
            $('#logintel').click(function() {
                $("#loginpassword").css("display", "none");
                $("#logintelnumber").css("display", "block");
                $("#registerMod").css("display", "none");
                $("#modifyPwd").css("display", "none");
                $("#loginpwd").css("text-decoration", "none")
                $("#logintel").css("text-decoration", "underline")
            });
            $(".register").click(function() {
                $("#loginpassword").css("display", "none");
                $("#logintelnumber").css("display", "none");
                $("#registerMod").css("display", "block");
                $("#loginpwd").css("text-decoration", "none")
                $("#logintel").css("text-decoration", "none")
            });

            $(".modifyPwd").click(function() {
                $("#loginpassword").css("display", "none");
                $("#logintelnumber").css("display", "none");
                $("#modifyPwd").css("display", "block");
                $("#loginpwd").css("text-decoration", "none")
                $("#logintel").css("text-decoration", "none")
            });


            //此处写jquery的代码：
            $("#userAccount").blur(function () {//blur : 失去焦点的事件！！！
                var userAccount = $("#userAccount").val();
                if (userAccount===null || userAccount===""){
                    //layer.msg("用户名不能为空")
                    return false;
                }
                else {
                    $.get("/users/checkAccount?account="+$("#userAccount").val(),function (data) {
                        //console.log(data)
                        layer.msg(data.message)  //将响应的结果显示在页面上！！！
                    },"json");//get请求；   "text" : 表示返回的数据是文本内容；
                }
            });
            $("#registerTel").blur(function () {//blur : 失去焦点的事件！！！
                var registerTel = $("#registerTel").val();
                if (registerTel===null || registerTel==="" || !(/^1[3456789]\d{9}$/.test(registerTel))){
                    //layer.msg("手机号不能为空")
                    return false;
                }
                else {
                    $.get("/users/checkTel?tel="+$("#registerTel").val(),function (data) {
                        //console.log(data)
                        layer.msg(data.message)  //将响应的结果显示在页面上！！！
                    },"json");//get请求；   "text" : 表示返回的数据是文本内容；
                }
            });
        })
    </script>
    <style>
        input {
            border-radius: 3px;
            border: grey;
            outline: none;
        }
    </style>
</head>
<body class="gray-bg" id="login-bg" ng-app="myapp" ng-controller="myctrl">
    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div style="margin-top: 100px">
            <div>
<!--                <h1 class="logo-name"><img style="width: 200px;height: 200px" th:src="@{/img/dog.jpg}"></h1>-->
            </div>
<!--            <h3>||Φ|(|T|Д|T|)|Φ||</h3>-->
            <p class="text-muted text-center"> <button id="loginpwd" style="border: none;background: none">账号密码登录</button> | <button id="logintel" style="border: none;background: none">手机短信登录</button>
            </p>
            <!--用户名密码模块-->
            <div id="loginpassword" style="display: block;">
                <form class="m-t" role="form">
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="text" class="form-control" placeholder="用户名" id="userName" ng-model="user.userAccount">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="password" class="form-control" placeholder="密码" ng-model="user.userPassword">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input placeholder="验证码" style="padding: 6px;border: grey;outline: none;" class="form-group" ng-model="vcode1" type="text" id="vcode" >
                            <span style="font-size: 11px;width: 29px" class="vcode-box" id="vcode-box" title="点击切换验证码"></span>
                        </label>
                    </div>
                    <button ng-click="loginPwd()" type="submit" class="btn btn-primary block full-width m-b">登 录</button>
                    <p class="text-muted text-center">
                        <button class="register" style="border: none;background: none;color: black">注册一个新账号</button>
                    </p>
                    </form>
            </div>
            <!--手机号登陆模块-->
            <div id="logintelnumber" style="display: none;">
                <form class="m-t" role="form">
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="text" id="phoneNumber" class="form-control" placeholder="手机号" ng-model="user.userTel">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input placeholder="验证码" style="width:160px;height:30px;padding: 6px 16px;border: grey;outline: none;border-radius: 3px;" class="form-group" ng-model="verifCode" type="text" id="smscode" >
                            <button ng-bind="timing" class="btn btn-success btn-sm codeBtn" ng-click="reacQuire()"></button>
                        </label>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label>-->
<!--                            <input placeholder="验证码" style="padding: 6px;border: grey;outline: none;" class="form-group"  required="" ng-model="vcode1" type="text" id="verifcode" >-->
<!--                            <span class="vcode-box" id="verifcode-box" title="点击切换验证码"></span>-->
<!--                        </label>-->
<!--                    </div>-->
                    <a ng-click="loginTel()" type="submit" class="btn btn-primary block full-width m-b">登 录</a>
                    <p class="text-muted text-center">
                        <button class="register" style="border: none;background: none;color: black">注册一个新账号</button>
                    </p>
                </form>
            </div>
            <!--注册模块-->
            <div id="registerMod" style="display: none;">
                <form class="m-t" role="form">
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="text" class="form-control" placeholder="用户名" id="userAccount" ng-model="user.userAccount">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="password" class="form-control" placeholder="密码" id="password" ng-model="user.userPassword">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="password" class="form-control" placeholder="确认密码" id="checkpwd">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input style="border: grey;outline: none;border-radius: 3px;" type="text" id="registerTel" class="form-control" placeholder="手机号" ng-model="user.userTel">
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input placeholder="验证码" style="width:160px;height:30px;padding: 6px 16px;border: grey;outline: none;border-radius: 3px;" class="form-group" ng-model="verifCode" type="text" id="regcode" >
                            <button ng-bind="timing" class="btn btn-success btn-sm codeBtn" ng-click="reacQuire()"></button>
                        </label>
                    </div>
                    <a ng-click="register()" type="submit" class="btn btn-primary block full-width m-b">注  册</a>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
